<template>
  <div class="addColumns">
    <a-tree :treeData="siteTree" :fieldNames="fieldNames" :checkable="false" :selectable="false">
      <template v-slot:title="record">
        <div id="tree-item">
          <!-- <a-input class="input" v-model:value="jjj" placeholder="请输入栏目名" @blur="editContent(record, $event)" /> -->
          <div class="input" contenteditable="true" style="-webkit-user-select: auto" ref="dd"
            @blur="editContent(record, $event)" placeholder="请输入栏目名" @click.prevent.stop="OnFocus($event)">
            {{ record.name }}
          </div>
          <span class="iconfont icon-add" @click="addOrMinusData(record, 'add')"></span>
          <span class="iconfont icon-delete1" @click="addOrMinusData(record, 'minus')"></span>
        </div>
      </template>
    </a-tree>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick } from "vue";
import baseTree from "@/components/tree/baseTree.vue";
import { dataSourceType } from "@/type";
import { randomWord } from "@/utils/common";
const fieldNames = reactive({
  title: "name",
  key: "id",
  disableCheckbox: "assignable",
});
const jjj = ref("");
const siteTree = ref([
  {
    name: "01-0",
    id: "0-0",
    children: [
      {
        name: "",
        id: "0-0-0",
        children: [
          { name: "0-0-0-0", id: "0-0-0-0" },
          { name: "0-0-0-1", id: "0-0-0-1" },
          { name: "0-0-0-2", id: "0-0-0-2" },
        ],
      },
      {
        name: "0-0-1",
        id: "0-0-1",
        children: [
          {
            name: "0-0-1-0",
            id: "0-0-1-0",
          },

          {
            name: "",
            id: "0-0-1-01",
          },
          { name: "0-0-1-1", id: "0-0-1-1" },
          { name: "0-0-1-2", id: "0-0-1-2" },
        ],
      },
    ],
  },
]);

const dd = ref();
const OnFocus = (ev: any) => {
  // 显示隐藏placeholder
  ev.target.blur();
  ev.target.focus();
};
const editContent = (record: any, ev: any) => {
  let value = ev.target.innerText;
  let data = JSON.parse(JSON.stringify(siteTree.value));
  loop(data, record.id, value, "modify");
  siteTree.value = JSON.parse(JSON.stringify(data));
};
const addOrMinusData = (record: any, type: string) => {
  let data = JSON.parse(JSON.stringify(siteTree.value));
  loop(data, record.id, "", type);
  siteTree.value = JSON.parse(JSON.stringify(data));
  console.log(siteTree.value, 9999);
};
const loop = (
  data: dataSourceType[],
  id: any,
  value: any,
  type: string
): any => {
  for (let i = 0; i < data.length; i++) {
    if (data[i].id == id) {
      type == "modify" ? (data[i].name = value) : ""; // 修改值
      type == "minus" ? data.splice(i, 1) : ""; //删除值
      if (type == "add") {
        let obj = {
          name: "",
          id: randomWord(false, 4, 4),
          children: [],
        };
        data[i].children.push(obj);
      }
    } else {
      if (data[i].children instanceof Array && data[i].children.length) {
        loop(data[i].children, id, value, type);
      }
    }
  }
};

// const editContent = (record: any, ev: any) => {

//   let value = ev.target.innerText;
//   let data = JSON.parse(JSON.stringify(siteTree.value));
//   loop(data, record.id, value);
//   siteTree.value = JSON.parse(JSON.stringify(data));
//   console.log(value, siteTree.value, 999);

// }
// // 递归处理数据
// const loop = (datalist: dataSourceType[] = [], id: any, value: any): any => { // 递归遍历处理数据
//   let record: dataSourceType = {};
//   const loop1 = function (data: dataSourceType[], id: any, value: any) {
//     if (data instanceof Array && data.length) {
//       return data.map(d => {
//         if (d.id == id) {
//           d.name = value;
//         }
//         if (d.children instanceof Array && d.children.length) {
//           d.children = loop1(d.children, id, value)
//         }
//         return d
//       })
//     }
//   }
//   loop1(datalist, id, value);
//   return record;
// }
</script>

<style lang="less" scoped>
.addColumns {
  #tree-item {
    display: flex;
    align-items: center;

    .input {
      width: 160px;
      border-color: #fff;
      box-shadow: none;
      box-sizing: border-box;
      height: 32px;
      line-height: 32px;
      padding-left: 8px;
      position: relative;
      z-index: 1;

      // /* 输入框为空时显示 placeholder */
      &:empty:before {
        content: attr(placeholder);
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.25);
        line-height: 32px;
        position: absolute;
        z-index: -2;
      }

      /* 输入框获取焦点时移除 placeholder */
      &:focus:before {
        content: none;
      }
    }

    .input:hover {
      border: 1px solid rgba(0, 0, 0, 0.15);
    }

    .input:focus {
      border: 1px solid rgba(0, 0, 0, 0.15);
    }

    .iconfont {
      font-size: 16px;
      color: rgba(0, 0, 0, 0.45);
      display: none;

      &:hover {
        color: rgba(0, 0, 0, 0.85);
      }
    }

    .iconfont:nth-of-type(1) {
      margin-left: 8px;
      margin-right: 12px;
    }
  }
}
</style>
<style lang="less">
.addColumns {
  .ant-tree .ant-tree-node-content-wrapper:hover {
    background-color: #fff;
  }

  .ant-tree-treenode {
    width: 100%;
  }

  .ant-tree-treenode:hover {
    #tree-item .iconfont {
      display: block;
    }
  }
}
</style>
